<template>
  <a
    class="text-neutral-800 hover:text-neutral-400 transition-colors duration-500"
    :href="url"
    target="_blank"
  >
    <div
      class="w-[320px] p-4 mx-4 mt-4 bg-neutral-200 rounded-md flex justify-start items-start"
    >
      <img class="h-[96px] w-auto" :src="img" />
      <div v-show="title.length > 0" class="ml-4 font-medium">
        {{ title }}
      </div>
    </div>
  </a>
</template>

<script setup lang="ts">
import { useHttpRequest } from '../../networks';

const props = defineProps<{ url: string; title?: string }>();
const req = useHttpRequest();
let title = ref('');
let img = ref('');
const hostpath = props.url.replaceAll('http://', '').replaceAll('https://', '');
const host = props.url.split('/')[2];
onMounted(async () => {
  if (props.title) {
    title.value = props.title;
  } else {
    title.value = (
      await req.get('https://api.qianhantech.com/spider/site-info/title', {
        params: {
          host: hostpath,
        },
      })
    ).data.title;
  }
  if (host.includes('marketplace.visualstudio.com')) {
    img.value = (
      await req.get('https://api.qianhantech.com/spider/vsce/img', {
        params: {
          url: props.url,
        },
      })
    ).data.img;
  } else {
    img.value = `https://api.iowen.cn/favicon/${host}.png`;
  }
});
</script>

<style lang="scss" scoped></style>
